<template>
  <div class="detailCon">
    <div class="row detailItem">
      <span
        v-if="
          mouldNo !== undefined && useWODetails.displayConfig.show_Model_Number
        "
        class="col dTitle"
        >模号: {{ mouldNo }}</span
      >
      <span
        v-if="
          designNum !== undefined &&
          useWODetails.displayConfig.show_Design_Number
        "
        class="col dTitle"
        >设计编号: {{ designNum }}</span
      >
    </div>
    <div
      class="row detailItem justify-center"
      v-if="
        blackPicUrl !== undefined &&
        useWODetails.displayConfig.show_Black_And_White_Photo
      "
    >
      <div class="col">
        <q-img
          :src="blackPicUrl"
          style="max-height: 140px; max-width: 150px;cursor: pointer"
          @click="showSingle"
        >
          <template v-slot:error>
            <div class="absolute-full flex flex-center bg-black text-white">
              无法加载照片
            </div>
          </template>
        </q-img>
      </div>
      <vue-easy-lightbox
        :visible="visibleRef"
        :imgs="imgsRef"
        :index="indexRef"
        @hide="onHide"
      ></vue-easy-lightbox>
    </div>
    <q-separator />

    <div
      class="row detailItem"
      v-if="
        productRemark !== undefined &&
        useWODetails.displayConfig.show_Production_Instructions
      "
    >
      <span class="col-3 dTitle">生产指示</span>
      <span class="col dValue">{{ productRemark }}</span>
    </div>
    <q-separator />

    <div
      class="row detailItem"
      v-if="effect !== undefined && useWODetails.displayConfig.show_Result"
    >
      <span class="col-3 dTitle">效果</span>
      <span class="col dValue">{{ effect }}</span>
    </div>
    <q-separator />

    <div class="row detailItem">
      <table class="detailTb">
        <thead>
          <tr>
            <th colspan="2">字印</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-if="
              productMarkContent !== undefined &&
              useWODetails.displayConfig.show_Customer_Engraving_Content
            "
          >
            <th>字印內容</th>
            <td>{{ productMarkContent }}</td>
          </tr>
          <tr
            v-if="
              productMarkFont !== undefined &&
              useWODetails.displayConfig.show_Customer_Engraving_Font
            "
          >
            <th class="cs-bt">客印字体</th>
            <td>{{ productMarkFont }}</td>
          </tr>
          <tr
            v-if="
              product_mark_desc !== undefined &&
              useWODetails.displayConfig.show_Engraving_Description
            "
          >
            <th>客印说明</th>
            <td>{{ product_mark_desc }}</td>
          </tr>
          <tr
            v-if="
              productMarkFont !== undefined &&
              useWODetails.displayConfig.show_Engraving_Effect
            "
          >
            <th>客印效果</th>
            <!-- :style="{ fontFamily: productMarkEfferct }" -->
            <td  v-if="product_mark_effect !== undefined" :style="getFontStyle()">
              {{ product_mark_effect }}
            </td>
          </tr>
          <tr>
            <th>石重字印</th>
            <td>
              <div>
                <div v-for="(group, index) in groupedActualBom" :key="index">
                  <div>
                    {{ group.seq }})
                    {{
                      group.laser_marks
                        .filter((v) => v != null && v != "")
                        .join(", ")
                    }}
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- <div v-for="(item, index) in test_data" :key=index>
      {{ item.name }} : <span :style="item.style">
        {{ 'ABC123!#謝瑞麟' }}
      </span> , file: {{ item.file }}
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useWoDetailsStore } from "src/stores/modules/wodetailsStore";
import { API_TSL_FRONTEND, resolveDjangoUrl } from "boot/axios";
import VueEasyLightbox from "vue-easy-lightbox";

const imgsRef = ref([])
const visibleRef = ref(false)

const onShow = () => {
  visibleRef.value = true;
};
const onHide = () => {
  visibleRef.value = false
}

const showSingle = () => {
  imgsRef.value = blackPicUrl.value;
  onShow();
};

let mouldNo = ref(null),
  designNum = ref(null),
  blackPicUrl = ref(null),
  productRemark = ref(null),
  effect = ref(null),
  productMarkContent = ref(null),
  productMarkFont = ref(null),
  productMarkDesc = ref(null),
  productMarkEfferct = ref(null),
  laserTdContent = ref(null),
  product_mark_desc = ref(null),
  product_mark_effect = ref(null);

const zoomModalOpen = ref(false);

// Get values
const useWODetails = useWoDetailsStore();
console.log("order details", useWODetails.displayConfig);

const oi = useWODetails.orderInfo;
designNum.value =
  oi.designNum === "null" || oi.designNum === "" ? " " : oi.designNum;
mouldNo.value = oi.mouldNo === "null" || oi.mouldNo === "" ? " " : oi.mouldNo;

const actualBom = JSON.stringify(useWODetails.prodInfo.actualBom);

const actualBomObj = JSON.parse(actualBom);
const actualBomObjSeqAndLaserMark = actualBomObj.stoneInfo.map(
  ({ seq, laser_mark }) => ({
    seq,
    laser_mark,
  })
);
console.log(actualBomObjSeqAndLaserMark);
const sortedActualBomObjSeqAndLaserMark = actualBomObjSeqAndLaserMark.sort(
  (a, b) => a.seq - b.seq
);
const groupedActualBom = sortedActualBomObjSeqAndLaserMark.reduce(
  (groups, item) => {
    const group = groups.find((g) => g.seq === item.seq);
    if (group) {
      group.laser_marks.push(item.laser_mark);
    } else {
      groups.push({
        seq: item.seq,
        laser_marks: [item.laser_mark],
      });
    }
    return groups;
  },
  []
);

const di = useWODetails.desingInfo;
const image_proxy_url = resolveDjangoUrl() + API_TSL_FRONTEND  + "/OrderView/get_black_pic_img/?image_url=" // 图片代理由server来请求图片
blackPicUrl.value =
  di.blackPicUrl === "null" || di.blackPicUrl === "" ? " " : image_proxy_url + di.blackPicUrl;
  // di.blackPicUrl === "null" || di.blackPicUrl === "" ? " " : di.blackPicUrl;
productRemark.value =
  di.productRemark === "null" || di.productRemark === ""
    ? " "
    : di.productRemark;
blackPicUrl.value =
  di.blackPicUrl === "null" || di.blackPicUrl === "" ? " " : image_proxy_url + di.blackPicUrl;
  // di.blackPicUrl === "null" || di.blackPicUrl === "" ? " " : di.blackPicUrl;
effect.value = di.effect === "null" || di.effect === "" ? " " : di.effect;
productMarkContent.value =
  di.productMarkContent === "null" || di.productMarkContent === ""
    ? " "
    : di.productMarkContent;
productMarkFont.value =
  di.productMarkFont === "null" || di.productMarkFont === ""
    ? " "
    : di.productMarkFont;
productMarkDesc.value =
  di.productMarkDesc === "null" || di.productMarkDesc === ""
    ? " "
    : di.productMarkDesc;
product_mark_desc.value =
  di.product_mark_desc === "null" || di.product_mark_desc === ""
    ? " "
    : di.product_mark_desc;
product_mark_effect.value =
  di.product_mark_effect === "null" || di.product_mark_effect === ""
    ? " "
    : di.product_mark_effect;
if (di.productMarkFont != null) {
  productMarkEfferct.value = di.productMarkFont;
}

const openZoomModal = () => {
  zoomModalOpen.value = true;
};



function reformatString(string) {
  if (string){
    const value = string.replace(/[\s\p{P}]/gu, '').toLowerCase()
    console.log('reformatString', value);
    return value
  }
  return string
}

function getFontStyle() {
  // productMarkFont.value = "MS UI Gothic"
  if (reformatString(productMarkFont.value) == "楷体" || reformatString(productMarkFont.value) == "楷體") {
    return "font-family: kaiu;";
  }
  if (reformatString(productMarkFont.value) == "黑体" || reformatString(productMarkFont.value) == "黑體") {
    return "font-family: msjh;";
  }
  if (reformatString(productMarkFont.value) == "宋体" || reformatString(productMarkFont.value) == "宋體") {
    return "font-family: simsun;";
  }
  if (reformatString(productMarkFont.value) == "arial") {
    return "font-family: arial;";
  }
  if (reformatString(productMarkFont.value) == "commercialscriptbt") {
    return "font-family: CommercialScript_BT";
  }
  if (reformatString(productMarkFont.value) == "euphemia") {
    return "font-family: Euphemia;";
  }
  if (reformatString(productMarkFont.value) == "msuigothic") {
    return "font-family: msgothic;";
  }
  if (reformatString(productMarkFont.value) == "vinetabt") {
    return "font-family: Vineta_BT;";
  }
  if (reformatString(productMarkFont.value) == "segoeui") {
    return "font-family: segoeui;";
  }
  return "font-family: kaiu;";
}
</script>

<style lang="scss" scoped>
// @import url('src/assets/fontStyles/from_client/msgothic.ttc');

.detailCon {
  background-color: rgba(255, 255, 255, 0.9);
  margin: 10px 5px 5px 5px;
  border-radius: 10px;
  padding: 10px 5px 5px 10px;
  font-size: 1.1rem;
  @media (max-width: 480px) {
    font-size: 0.8em;
    margin: 0px 5px 5px 5px;
  }
  .detailItem {
    margin-top: 5px;
    margin-bottom: 5px;
    .dTitle {
      color: #1100bc;
      font-weight: bold;
    }
    .dValue {
      margin-left: 5px;
      @media (max-width: 480px) {
        font-size: 0.9rem;
      }
    }
    .detailTb {
      width: 100%;
      border-collapse: separate !important;
      thead {
        width: 100%;
        text-align: center;
        background-color: #a7b5da;
      }
      tbody th {
        background-color: #cad9ff;
        @media (max-width: 480px) {
          font-size: 1rem;
        }
      }
      tbody td {
        background-color: white;
        text-align: center;
        @media (max-width: 480px) {
          font-size: 0.8rem;
        }
      }
    }
  }
}
</style>
